<template>
  <div class="product-list-page">
    <!-- 页面标题与操作栏 -->
    <div class="page-header">
      <h2 class="page-title">产品列表</h2>
      <el-button type="text" class="return-btn" @click="handleReturn">返回</el-button>
    </div>

    <!-- 新增产品按钮 -->
    <el-button type="primary" class="add-product-btn" @click="openAddProductDialog">新增产品</el-button>

    <!-- 筛选与批量操作栏 -->
    <div class="filter-batch-bar">
      <el-checkbox v-model="selectAll" @change="handleSelectAll">全选</el-checkbox>
      <span class="batch-text">批量操作</span>

      <div class="filter-group">
        <span class="filter-label">筛选:</span>
        <el-checkbox-group v-model="selectedFilters">
          <el-checkbox label="品牌A" />
          <el-checkbox label="品牌B" />
          <el-checkbox label="品牌C" />
          <el-checkbox label="单品" />
          <el-checkbox label="套盒" />
        </el-checkbox-group>
      </div>
    </div>

    <!-- 产品列表表格 -->
    <el-table
      :data="productList"
      border
      class="product-table"
      style="width: 100%"
      :cell-style="{ textAlign: 'center' }"
      :header-cell-style="{ textAlign: 'center', background: '#f5f5f5' }"
    >
      <el-table-column type="selection"   />
      <el-table-column prop="serial" label="序号"   />
      <el-table-column prop="productCode" label="产品编号"  />
      <el-table-column prop="productName" label="产品名称"   />
      <el-table-column prop="brand" label="归属品牌"  />
      <el-table-column prop="spec" label="规格"  />
      <el-table-column prop="type" label="类型"   />
      <el-table-column prop="stock" label="库存"   />
      <el-table-column label="操作" width="220">
        <template #default="scope">
          <el-button 
            type="primary" 
            plain
           
            @click="openEditDialog(scope.row)"
          >
            编辑
          </el-button>
          <el-button 
            type="danger" 
            
            @click="handleDelete(scope.row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增产品弹窗（图二内容） -->
    <el-dialog 
      v-model="addDialogVisible" 
      title="新增产品" 
      width="1200px"
      :close-on-click-modal="false"
    >
      <!-- 弹窗头部筛选栏 -->
      <div class="dialog-header-filter">
        <div class="filter-item">
          <span class="filter-label">归属品牌</span>
          <el-select v-model="dialogBrand" placeholder="请选择品牌" class="filter-select">
            <el-option label="雅诗兰黛" value="雅诗兰黛" />
            <el-option label="丝芙兰" value="丝芙兰" />
          </el-select>
        </div>
        <div class="filter-item">
          <span class="filter-label">产品类型</span>
          <el-select v-model="dialogType" placeholder="请选择类型" class="filter-select">
            <el-option label="单品" value="单品" />
            <el-option label="套盒" value="套盒" />
          </el-select>
        </div>
        <div class="dialog-action-btns">
          <el-button type="primary" plain class="import-btn">导入</el-button>
          <el-button type="primary" class="add-btn" @click="openAddItemDialog">添加</el-button>
        </div>
      </div>

      <!-- 弹窗批量操作栏 -->
      <div class="dialog-batch-bar">
        <el-checkbox v-model="dialogSelectAll" @change="handleDialogSelectAll">全选</el-checkbox>
        <span class="batch-text">批量操作</span>
      </div>

      <!-- 弹窗产品表格 -->
      <el-table
        :data="dialogProductList"
        border
        class="dialog-product-table"
        style="width: 100%"
        :cell-style="{ textAlign: 'center' }"
        :header-cell-style="{ textAlign: 'center', background: '#f5f5f5' }"
      >
        <el-table-column type="selection" width="50" />
        <el-table-column prop="serial" label="序号" width="60" />
        <el-table-column prop="productCode" label="产品编号" width="100" />
        <el-table-column prop="productName" label="产品名称" width="180" />
        <el-table-column prop="brand" label="归属品牌" width="100" />
        <el-table-column prop="spec" label="规格" width="80" />
        <el-table-column prop="type" label="类型" width="80" />
        <el-table-column prop="retailPrice" label="零售价" width="100" />
        <el-table-column prop="stock" label="库存" width="80" />
        <el-table-column prop="specialPrice" label="特价" width="80" />
        <el-table-column prop="seckillPrice" label="秒杀价" width="100" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button 
              type="text" 
              class="modify-btn"
              @click="openDialogModifyDialog(scope.row)"
            >
              修改
            </el-button>
            <el-button 
              type="text" 
              class="delete-btn"
              @click="handleDialogDelete(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 一键保存按钮 -->
      <div class="dialog-save-btn-area">
        <el-button type="primary" class="save-btn" @click="handleDialogSave">一键保存</el-button>
      </div>

      <!-- 弹窗内“添加产品项”子弹窗 -->
      <el-dialog 
        v-model="addItemDialogVisible" 
        title="添加产品项" 
        width="600px"
        :close-on-click-modal="false"
      >
        <el-form :model="newProductItem" class="product-item-form">
          <el-form-item label="产品编号" label-width="80px" required>
            <el-input v-model="newProductItem.productCode" class="form-input" />
          </el-form-item>
          <el-form-item label="产品名称" label-width="80px" required>
            <el-input v-model="newProductItem.productName" class="form-input" />
          </el-form-item>
          <el-form-item label="归属品牌" label-width="80px" required>
            <el-select v-model="newProductItem.brand" placeholder="请选择品牌" class="form-input">
              <el-option label="雅诗兰黛" value="雅诗兰黛" />
              <el-option label="丝芙兰" value="丝芙兰" />
            </el-select>
          </el-form-item>
          <el-form-item label="规格" label-width="80px" required>
            <el-input v-model="newProductItem.spec" class="form-input" />
          </el-form-item>
          <el-form-item label="类型" label-width="80px" required>
            <el-select v-model="newProductItem.type" placeholder="请选择类型" class="form-input">
              <el-option label="单品" value="单品" />
              <el-option label="套盒" value="套盒" />
            </el-select>
          </el-form-item>
          <el-form-item label="零售价" label-width="80px" required>
            <el-input v-model.number="newProductItem.retailPrice" class="form-input" />
          </el-form-item>
          <el-form-item label="库存" label-width="80px" required>
            <el-input v-model.number="newProductItem.stock" class="form-input" />
          </el-form-item>
          <el-form-item label="特价" label-width="80px">
            <el-input v-model.number="newProductItem.specialPrice" class="form-input" />
          </el-form-item>
          <el-form-item label="秒杀价" label-width="80px">
            <el-input v-model.number="newProductItem.seckillPrice" class="form-input" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="addItemDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleAddItemSubmit">确认添加</el-button>
        </template>
      </el-dialog>

      <!-- 弹窗内“修改产品项”子弹窗 -->
      <el-dialog 
        v-model="dialogModifyDialogVisible" 
        title="修改产品项" 
        width="600px"
        :close-on-click-modal="false"
      >
        <el-form :model="currentDialogProduct" class="product-item-form">
          <el-form-item label="产品编号" label-width="80px" required>
            <el-input v-model="currentDialogProduct.productCode" class="form-input" />
          </el-form-item>
          <el-form-item label="产品名称" label-width="80px" required>
            <el-input v-model="currentDialogProduct.productName" class="form-input" />
          </el-form-item>
          <el-form-item label="归属品牌" label-width="80px" required>
            <el-select v-model="currentDialogProduct.brand" placeholder="请选择品牌" class="form-input">
              <el-option label="雅诗兰黛" value="雅诗兰黛" />
              <el-option label="丝芙兰" value="丝芙兰" />
            </el-select>
          </el-form-item>
          <el-form-item label="规格" label-width="80px" required>
            <el-input v-model="currentDialogProduct.spec" class="form-input" />
          </el-form-item>
          <el-form-item label="类型" label-width="80px" required>
            <el-select v-model="currentDialogProduct.type" placeholder="请选择类型" class="form-input">
              <el-option label="单品" value="单品" />
              <el-option label="套盒" value="套盒" />
            </el-select>
          </el-form-item>
          <el-form-item label="零售价" label-width="80px" required>
            <el-input v-model.number="currentDialogProduct.retailPrice" class="form-input" />
          </el-form-item>
          <el-form-item label="库存" label-width="80px" required>
            <el-input v-model.number="currentDialogProduct.stock" class="form-input" />
          </el-form-item>
          <el-form-item label="特价" label-width="80px">
            <el-input v-model.number="currentDialogProduct.specialPrice" class="form-input" />
          </el-form-item>
          <el-form-item label="秒杀价" label-width="80px">
            <el-input v-model.number="currentDialogProduct.seckillPrice" class="form-input" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="dialogModifyDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleDialogModifySubmit">确认修改</el-button>
        </template>
      </el-dialog>
    </el-dialog>

    <!-- 编辑产品弹窗 -->
    <el-dialog 
      v-model="editDialogVisible" 
      title="编辑产品" 
      width="600px"
      :close-on-click-modal="false"
    >
      <el-form :model="currentProduct" class="edit-form">
        <el-form-item label="产品编号" label-width="80px" required>
          <el-input v-model="currentProduct.productCode" class="form-input" />
        </el-form-item>
        <el-form-item label="产品名称" label-width="80px" required>
          <el-input v-model="currentProduct.productName" class="form-input" />
        </el-form-item>
        <el-form-item label="归属品牌" label-width="80px" required>
          <el-select v-model="currentProduct.brand" placeholder="请选择品牌" class="form-input">
            <el-option label="丝芙兰" value="丝芙兰" />
            <el-option label="雅诗兰黛" value="雅诗兰黛" />
          </el-select>
        </el-form-item>
        <el-form-item label="规格" label-width="80px" required>
          <el-input v-model="currentProduct.spec" class="form-input" />
        </el-form-item>
        <el-form-item label="类型" label-width="80px" required>
          <el-select v-model="currentProduct.type" placeholder="请选择类型" class="form-input">
            <el-option label="单品" value="单品" />
            <el-option label="套盒" value="套盒" />
          </el-select>
        </el-form-item>
        <el-form-item label="库存" label-width="80px" required>
          <el-input v-model.number="currentProduct.stock" class="form-input" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleEditSubmit">确认编辑</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, toRaw } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
// 产品列表数据（图一）
const productList = ref([
  {
    serial: 1,
    productCode: '45451',
    productName: '丝芙兰',
    brand: '丝芙兰精华眼霜',
    spec: '50g',
    type: '单品',
    stock: 65426
  },
  {
    serial: 2,
    productCode: '451415',
    productName: '丝芙兰',
    brand: '丝芙兰精华眼霜',
    spec: '50g',
    type: '套盒',
    stock: 65426
  },
  {
    serial: 3,
    productCode: '4545',
    productName: '丝芙兰',
    brand: '丝芙兰精华眼霜',
    spec: '50g',
    type: '套盒',
    stock: 65426
  }
]);

// 筛选与全选状态（图一）
const selectAll = ref(false);
const selectedFilters = ref([]);

// 新增产品弹窗状态（图二）
const addDialogVisible = ref(false);
const dialogBrand = ref('');
const dialogType = ref('');
const dialogSelectAll = ref(false);
// 弹窗内产品列表（图二）
const dialogProductList = ref([
  {
    serial: 1,
    productCode: '87878',
    productName: '雅诗兰黛精华面膜',
    brand: '雅诗兰黛',
    spec: '1',
    type: '单品',
    retailPrice: 4545,
    stock: 0,
    specialPrice: 8888,
    seckillPrice: 720
  },
  {
    serial: 2,
    productCode: '87878',
    productName: '雅诗兰黛精华面膜',
    brand: '雅诗兰黛',
    spec: '1',
    type: '单品',
    retailPrice: 4545,
    stock: 0,
    specialPrice: 8888,
    seckillPrice: 720
  },
  {
    serial: 3,
    productCode: '87878',
    productName: '雅诗兰黛精华面膜',
    brand: '雅诗兰黛',
    spec: '1',
    type: '单品',
    retailPrice: 4545,
    stock: 0,
    specialPrice: 8888,
    seckillPrice: 720
  }
]);

// 弹窗内“添加产品项”子弹窗
const addItemDialogVisible = ref(false);
const newProductItem = reactive({
  productCode: '',
  productName: '',
  brand: '',
  spec: '',
  type: '',
  retailPrice: 0,
  stock: 0,
  specialPrice: 0,
  seckillPrice: 0
});

// 弹窗内“修改产品项”子弹窗
const dialogModifyDialogVisible = ref(false);
const currentDialogProduct = reactive({});

// 编辑产品弹窗（图一）
const editDialogVisible = ref(false);
const currentProduct = reactive({});

// 图一全选操作
const handleSelectAll = (val) => {
  selectAll.value = val;
  ElMessage.info(val ? '已全选产品' : '已取消全选');
};

// 打开新增产品弹窗（图二）
const openAddProductDialog = () => {
  addDialogVisible.value = true;
};

// 弹窗内全选操作（图二）
const handleDialogSelectAll = (val) => {
  dialogSelectAll.value = val;
  ElMessage.info(val ? '已全选弹窗内产品' : '已取消全选');
};

// 弹窗内打开“添加产品项”子弹窗
const openAddItemDialog = () => {
  // 重置表单
  Object.keys(newProductItem).forEach(key => {
    newProductItem[key] = key.includes('Price') || key === 'stock' ? 0 : '';
  });
  addItemDialogVisible.value = true;
};

// 弹窗内提交“添加产品项”
const handleAddItemSubmit = () => {
  if (!newProductItem.productCode || !newProductItem.productName) {
    ElMessage.warning('请填写产品编号和名称');
    return;
  }
  newProductItem.serial = dialogProductList.value.length + 1;
  dialogProductList.value.push(toRaw(newProductItem));
  ElMessage.success('产品项添加成功');
  addItemDialogVisible.value = false;
};

// 弹窗内打开“修改产品项”子弹窗
const openDialogModifyDialog = (row) => {
  Object.assign(currentDialogProduct, JSON.parse(JSON.stringify(row)));
  dialogModifyDialogVisible.value = true;
};

// 弹窗内提交“修改产品项”
const handleDialogModifySubmit = () => {
  const index = dialogProductList.value.findIndex(item => item.serial === currentDialogProduct.serial);
  if (index !== -1) {
    dialogProductList.value.splice(index, 1, toRaw(currentDialogProduct));
  }
  ElMessage.success('产品项修改成功');
  dialogModifyDialogVisible.value = false;
};

// 弹窗内删除产品项
const handleDialogDelete = (row) => {
  ElMessageBox.confirm(
    '确定删除该产品项吗？',
    '提示',
    { type: 'warning' }
  ).then(() => {
    const index = dialogProductList.value.findIndex(item => item.serial === row.serial);
    if (index !== -1) dialogProductList.value.splice(index, 1);
    ElMessage.success('产品项删除成功');
  }).catch(() => {});
};

// 弹窗内一键保存
const handleDialogSave = () => {
  // 实际项目中需将弹窗内产品同步到主列表
  ElMessage.success('弹窗内产品已保存');
  addDialogVisible.value = false;
};

// 图一打开编辑弹窗
const openEditDialog = (row) => {
  Object.assign(currentProduct, JSON.parse(JSON.stringify(row)));
  editDialogVisible.value = true;
};

// 图一提交编辑
const handleEditSubmit = () => {
  const index = productList.value.findIndex(item => item.serial === currentProduct.serial);
  if (index !== -1) {
    productList.value.splice(index, 1, toRaw(currentProduct));
  }
  ElMessage.success('产品编辑成功');
  editDialogVisible.value = false;
};

// 图一删除产品
const handleDelete = (row) => {
  ElMessageBox.confirm(
    '确定删除该产品吗？',
    '提示',
    { type: 'warning' }
  ).then(() => {
    const index = productList.value.findIndex(item => item.serial === row.serial);
    if (index !== -1) productList.value.splice(index, 1);
    ElMessage.success('产品删除成功');
  }).catch(() => {});
};
const router = useRouter()
// 返回按钮
const handleReturn = () => {
   router.back()
};



</script>

<style scoped>
.product-list-page {
  padding: 20px;
  font-family: "Microsoft Yahei", sans-serif;
  background: #fff;
}

/* 页面标题 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}
.page-title {
  font-size: 16px;
  font-weight: 500;
  color: #333;
}
.return-btn {
  padding: 0;
  color: #666;
}

/* 新增产品按钮 */
.add-product-btn {
  background: #52c41a;
  border-color: #52c41a;
  margin-bottom: 15px;
}

/* 筛选与批量操作栏 */
.filter-batch-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  font-size: 14px;
}
.filter-group {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.filter-label {
  font-size: 14px;
  color: #333;
}

/* 产品列表表格 */
.product-table {
  --el-table-border-color: #dcdcdc;
  margin-bottom: 20px;
}
.edit-btn {
  background: #fff;
  color: #1890ff;
  border-color: #1890ff;
  margin-right: 5px;
}
.delete-btn {
  background: #f5222d;
  border-color: #f5222d;
}

/* 新增产品弹窗样式（图二） */
.dialog-header-filter {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 15px;
}
.filter-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.filter-select {
  width: 200px;
}
.dialog-action-btns {
  margin-left: auto;
  display: flex;
  gap: 10px;
}
.import-btn {
  background: #fff;
  color: #1890ff;
  border-color: #1890ff;
}
.add-btn {
  background: #52c41a;
  border-color: #52c41a;
}
.dialog-batch-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  font-size: 14px;
}
.dialog-product-table {
  --el-table-border-color: #dcdcdc;
  margin-bottom: 20px;
}
.dialog-save-btn-area {
  text-align: center;
}
.save-btn {
  background: #1890ff;
  border-color: #1890ff;
  padding: 8px 24px;
}

/* 子弹窗表单样式 */
.product-item-form, .edit-form {
  padding: 10px 0;
}
.form-input {
  width: 300px;
}
</style>